/* global React ReactRouter: true */
import { fetchUtil } from 'utils/fetchUtil'
const { formatCdn } = require('utils/formatCdn')


class Lottery extends React.Component {

  constructor(props, states = {}) {
    super(props)
    this.state = {
      ...states,
      rotateRange: 0, // 旋转幅度
      rotateSpeed: 1, // 旋转速度
    }
  }
  componentDidUpdate() {
    const { rotateRange } = this.state
    if (Math.floor(rotateRange / 360) === 6) { // 6圈
      this.setEndime()
      PubSub.publish('toast.info', '恭喜您获得一等奖')
    }
  }
  componentWillUnmount() {
    this.setEndime()
  }
  onClick() {
    const { rotateRange } = this.state
    if (!rotateRange) {
      // 请求接口获得抽奖数据
      this.setStartTime() // 调取抽奖接口
    }
  }
  setStartTime() {
    const { rotateSpeed } = this.state
    this.time = setInterval(() => {
      this.setState({
        rotateRange: this.state.rotateRange + 1,
      })
    }, rotateSpeed)
  }
  setEndime() {
    clearTimeout(this.time)
    this.setState({
      rotateRange: 0,
    })
  }
  styleRender(rotateRange) {
    return {
      MozTransform: `rotate(${rotateRange}deg)`,
      WebkitTransform: `rotate(${rotateRange}deg)`,
      transform: `rotate(${rotateRange}deg)`,
      OTransition: `rotate(${rotateRange}deg)`,
    }
  }
  render() {
    const chassisPic = '' // 底盘图片
    const pointPic = ''   // 指针图片
    const { rotateRange } = this.state
    return (
      <div className='mainView'>
        <img src={chassisPic} className='chassisPicStyle' alt='' style={this.styleRender(rotateRange)} />
        <img src={pointPic} className='pointPicStyle' alt='' onClick={this.onClick.bind(this)}/>
      </div>
    )
  }
}
export default Lottery
